/**
 * 卖家退款表单弹出框
 */

import React, { Component } from 'react';
import { Modal, Input, Select, Button, Form, InputNumber, Row, Col } from 'antd';
import noop from 'util/noop'

const Option = Select.Option;
const FormItem = Form.Item;
class RefundDialog extends Component {


    static defaultProps = {
        visible:false,
        onOk:noop,
        onCancel:noop,
        disabled:false,//退款金额是否可输入
    }
    
    constructor(props) {
        super(props);
        //this.MAX_NUM = 300;

        this.state = {
            loading:false
        }
    }

    componentWillReceiveProps(nextProps) {
        if(!nextProps.visible){
           this.props.form.resetFields();
        }
    }
    
    render() {
        const { visible, disabled, onOk, onCancel, form, refund, ...rest }  = this.props;

        if (refund.size === 0){
            return null;
        }

        const tradeOrder = refund.get('tradeOrder');
        //const { content, less, errorMsg } = this.state;
        const formItemLayout = {
            labelCol:{
                md:{span:4},
                sm:{span:6},
                xs:{span:24}
            },
            wrapperCol:{
                md:{span:14},
                sm:{span:20},
                xs:{span:26}
            }
        };
        const textItemLayout = {
            labelCol:{
                md:{span:4},
                sm:{span:6},
                xs:{span:24}
            },
            wrapperCol:{
                md:{span:20},
                sm:{span:18},
                xs:{span:24}
            }
        }
        const refundField = form.getFieldDecorator('refundAmount',{
            initialValue:refund.get('applyRefundAmount') || '',
            rules:[
                {required:true,message:"请输入退款金额"}
            ]
        })(
            <InputNumber 
                style={{width:"120px"}}
                min={0.01}
                disabled={disabled}
                max={refund.get('payAmount')} 
                placeholder={refund.get('applyRefundAmount')}
                onChange={this.formatNum}
            />
        );

        const wayField = form.getFieldDecorator('payTypeId',{
            initialValue:refund.get('payTypeBOList').count() > 0 ?refund.getIn(['payTypeBOList','0','payTypeId']) : 0
        })(
            <Select style={{width:"120px"}}>
                {refund.get('payTypeBOList').map(payType => {
                    return (
                        <Option key={payType.get('payTypeId')} value={payType.get('payTypeId')}>{payType.get('payTypeName')}</Option>
                    )
                })}
            </Select>
        )

        const remarkField = form.getFieldDecorator("refundRemark",{})(
            <Input type="textarea" rows={4} maxLength="100" />
        )
        return (
            <Modal
                title="退款"
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={null}
                width={640}
                {...rest}
            >
               <Form onSubmit={this.handleSubmit}>
                    <FormItem
                    {...formItemLayout}
                    label="收款人"
                    >
                        {tradeOrder.get('buyNickName')}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="退款金额"
                        extra={`最多退款${refund.get('payAmount')}元(含运费${tradeOrder.get('logisticsFee') || 0}元)，已支付金额：${tradeOrder.get('totalTradeCash')||0}元`}
                        required
                    >
                        {refundField}
                    </FormItem>
                     <FormItem
                        {...formItemLayout}
                        label="退款方式"
                        required
                    >
                        {wayField}
                    </FormItem>
                     <FormItem
                        {...textItemLayout}
                        label="售后备注"
                    >
                        {remarkField}
                    </FormItem>
                    <FormItem className="t-center">
                        <Button type="ghost" onClick={this.handleCancel}>取消</Button>
                        <Button type="primary" loading={this.state.loading} className="pushl" htmlType="submit">确认退款</Button>
                    </FormItem>
               </Form>
               {this.renderTradeInfo(tradeOrder)}
               
            </Modal>
        );
    }
    /**
     * 限制为2位小数
     */
    formatNum = (value) => {
        const { form } = this.props;
        //保留2位小数
        value = value.toString().replace(/(\.\d[1-9])\d+/,"$1");
        //延迟设置
        setTimeout(()=>{
            form.setFieldsValue({
                refundAmount:value
            })
        },100)
        
    }
    /**
     * 订单相关信息
     */
    renderTradeInfo = (tradeOrder) => {
        // if(tradeOrder.isEmpty()){
        //     return null ;
        // }
        return (
            <div className="pushtt" style={{backgroundColor:"#eae9e9",padding:"10px 5px", borderTop:'1px dashed #ccc'}}>
                <Row>
                    <Col span="12"> 订单号：{tradeOrder.get('tid') || '-'}</Col>
                    <Col span="12">下单时间：{tradeOrder.get('ptime') || '-'}</Col>
                </Row>
                <Row>
                    <Col span="12">订单总额：&yen;{tradeOrder.get('totalTradeCash') ? tradeOrder.get('totalTradeCash').toFixed(2) : '-'}</Col>
                    <Col span="12"></Col>
                </Row>
            </div>
        )
    }
    /**
     * 退款确认
     */
    handleSubmit = (e) => {
        if(e){
            e.preventDefault()
        }
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.setState({loading:true});
                this.props.onOk(values)
                    .then(()=>{
                        this.setState({loading:false});
                    })
                    .catch(()=>{
                        this.setState({loading:false});
                    });
            }
        });
    }
    
    handleCancel = () => {
        this.props.onCancel();
    }
}

export default Form.create()(RefundDialog);